<template>
<div class="zuida">
<el-menu
  :default-active="this.$store.state.index"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#55bb8a"
  text-color="#2b312c"
  active-text-color="#bec936">
  <el-menu-item index="1"><router-link to="/shouye">首页</router-link></el-menu-item>
  <!-- 今日热榜 -->
  <el-menu-item index="2"> <router-link to="/liulan">推荐</router-link></el-menu-item>
  <!-- <el-menu-item index="4">消息管理</el-menu-item> -->
  <!-- <el-menu-item index="5">我创建的话题</el-menu-item> -->
  <el-menu-item index="3"><router-link to="/kaixing">开心一刻</router-link></el-menu-item>
  <el-menu-item index="4"><router-link to="/fatie">发帖</router-link></el-menu-item>
  <el-menu-item index="5"><router-link to="/huida">消息记录</router-link></el-menu-item>
  
  <!-- <el-menu-item index="10"></el-menu-item> -->
  <!-- <input type="text" class="search"> -->
  <div class="search" @click="search">
    <i class="el-icon-search"></i>
    你想知道的,我这里全有~
  </div>
   
  
  <el-menu-item index="7" class="wode"> <router-link to="/shuju">数据分析</router-link></el-menu-item>
  <el-submenu index="6" class="gzt">
    <template slot="title">我的</template>
    <el-menu-item index="6-1"><router-link to="/wode">信息详情</router-link></el-menu-item>
    <el-menu-item index="6-2"><router-link to="/denglu">退出登录</router-link></el-menu-item>
    <!-- <el-menu-item index="2-3">选项3</el-menu-item> -->
  </el-submenu>
  <!-- <div>nijjj</div> -->
  <!-- <el-menu-item index="8" >我的</el-menu-item> -->
</el-menu>
</div>
</template>


<script>
  export default {
    data() {
      return {
        index:'1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      search(){
        // location.reload()
        this.$store.commit('bian')
        this.$router.push('/search')

        
      }
    },
    created(){
      index:this.$store.state.index
    }
  }
</script>
<style lang="less" scoped>
// .default-active{
//   index:3;
// }
div{
  list-style: none;
  a{
    text-decoration: none;
  }
  // position: fixed;
  // top: 0;
  
}
.zuida{
  width: 100%;
  height: 80px;
  // background-color: red;
  // position: fixed;
}
  .gzt{
    position: absolute;
    right: 10px;
  }
  .wode{
    position: absolute;
    right: 100px;
  }
  .search{
    position: absolute;
    top: 10px;
    left: 850px;
    width: 500px;
    height: 36px;
    background-color: #8bb89ac9;
    border-radius: 20px;
    line-height: 36px;
    text-align: center;
    color: #636861;
  }
  // .zuida{
  //   display: flex;
  // }
</style>